import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';

import Search from './Search';
import Filter from './Filter';
import Layer from './Layer';
import Statistics from './Statistics';
import api from '../../../api';

const defaultFilterData = {code :'', areaMax :'', areaMin: '', town :'', village: ''};
const OverLayre = (props) => {
    const {map, userInfo, layerFields} = props;

    const [filterShow, setFilterShow] = useState(false);
    const [layerShow, setLayerShow] = useState(false);
    const [statisticsShow, setStatisticsShow] = useState(false);
    const [treeData, setTreeData] = useState([]);                           // 图层树
    const [featureNames, setFeatureNames] = useState({});                   // 要素名称字典

    const [filterDatas, setFilterDatas] = useState(defaultFilterData);      // 筛选内容

    useEffect(() => {
        api.search.queryLayerTree()
            .then((res) => {
                const {code, data} = res.data;
                if(code === 200){
                    setTreeData(data);
                    const featureNames = getFeatureNames(data);
                    setFeatureNames(featureNames);
                }
            }).catch((err) => {
                console.log(err);
            })
    },[]);

    // 获取图层要素字段名称映射数据
    const getFeatureNames = (datas) => {
        let featureNames = {};
        const recursive = (datas) => {
            datas.forEach(data => {
                const {name, code, children, fields} = data;
                if(fields){
                    const {mainName = ''} = fields;
                    if(mainName){
                        featureNames[code] = mainName;
                        featureNames[name] = mainName;
                    }
                }
                if(children.length > 0){
                    recursive(children);
                }
            });
        };

        recursive(datas);

        return featureNames;
    };  

    return (
        <>
            <Search 
                map={map}
                treeData={treeData}
                userInfo={userInfo}
                filterShow={filterShow}
                filterDatas={filterDatas}
                layerShow={layerShow}
                featureNames={featureNames}
                layerFields={layerFields}
                statisticsShow={statisticsShow}
                setFilterShow={setFilterShow}
                setLayerShow={setLayerShow}
                setStatisticsShow={setStatisticsShow}/>
            {
                filterShow && 
                    <Filter 
                        filterDatas={filterDatas}
                        setFilterDatas={setFilterDatas}
                        setFilterShow={setFilterShow}/>
            }
            {
                layerShow && 
                    <Layer
                        map={map}
                        treeData={treeData}
                        userInfo={userInfo}
                        featureNames={featureNames}
                        layerFields={layerFields}
                        setLayerShow={setLayerShow}/>
            }
            {
                statisticsShow && 
                    <Statistics 
                        map={map}
                        treeData={treeData}
                        layerFields={layerFields}
                        featureNames={featureNames}
                        userInfo={userInfo}
                        setStatisticsShow={setStatisticsShow}/>
            }
        </>
    )
};

OverLayre.propTypes = {
    map: PropTypes.object,
    userInfo: PropTypes.object,
    layerFields: PropTypes.object,
};

export default OverLayre;